<template>
  <div class="app-container">
    <div class="flex margin-bottom">

      <div class="flex card" :style="{
          boxShadow: `var(--el-box-shadow-lighter)`,
        }">
        <div class="tag">
          <div class="title">
            入口车道总数
          </div>
          <div class="num">{{info.cdsrk}}</div>
        </div>
        <div class="tag">
          <div class="title">
            出口车道总数
          </div>
          <div class="num">{{info.cdsck}}</div>
        </div>
      </div>

      <div class="flex card" :style="{
          boxShadow: `var(--el-box-shadow-lighter)`,
        }">
        <div class="tag">
          <div class="title">
            今日入口车道开通数
          </div>
          <div class="num">{{ info.jrkfcdrk }}</div>
        </div>
        <div class="tag">
          <div class="title">
            入口人工车道开通数
          </div>
          <div class="num">{{ info.jrkfrgcdrk }}</div>
        </div>
      </div>

      <div class="flex card" :style="{
          boxShadow: `var(--el-box-shadow-lighter)`,
        }">
        <div class="tag">
          <div class="title">
            今日出口车道开通数
          </div>
          <div class="num">{{info.jrkfcdck}}</div>
        </div>
        <div class="tag">
          <div class="title">
            出口人工车道开通数
          </div>
          <div class="num">{{info.jrkfrgcdck}}</div>
        </div>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <!-- -->
      <el-table-column type="expand">
        <template #default="props">
          <div class="">
            <el-row>
              <el-col :span="4">

              </el-col>
              <el-col :span="20">
                <el-table :data="props.row.list" :border="childBorder">
                  <el-table-column label="入口/出口" prop="outInLane">
                    <template #default="scope">
                      <dict-tag :options="out_in_lane" :value="scope.row.outInLane" />
                    </template></el-table-column>
                  <el-table-column label="车道编号" prop="laneNo" />
                  <el-table-column label="车道名称" prop="laneName" >

                    <template #default="scope">
                      <dict-tag :options="lane_name" :value="scope.row.laneName" />
                    </template></el-table-column>
                 



                  <el-table-column label="车道状态" prop="laneStatus">
                    <template #default="scope">
                      <dict-tag :options="lane_status" :value="scope.row.laneStatus" />
                    </template></el-table-column>
                  <el-table-column label="车道类型" prop="laneType">
                    <template #default="scope">
                      <dict-tag :options="lane_type" :value="scope.row.laneType" />
                    </template></el-table-column>
                </el-table>
              </el-col>
            </el-row>

          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="date" label="时间" width="180" /> -->
      <el-table-column prop="deptName" label="收费站" />
      <el-table-column prop="cdsrk" label="入口车道总数"  />
      <el-table-column prop="jrkfcdrk" label="入口车道开通数" />
      <el-table-column prop="jrkfrgcdrk" label="入口人工车道开通数" />
      <el-table-column prop="cdsck" label="出口车道总数" />
      <el-table-column prop="jrkfcdck" label="出口开通数" />
      <el-table-column prop="jrkfrgcdck" label="出口人工车道开通数" />
    </el-table>
  </div>

</template>

<script setup >
import moment from 'moment'
import { getlaneStatistics, getLaneInfo } from "@/api/coordination/lane";
import useUserStore from '@/store/modules/user'
import { getCKInfo } from '@/utils/auth'

const router = useRouter();
const { proxy } = getCurrentInstance();
const { out_in_lane, lane_type, lane_status,lane_name } = proxy.useDict('out_in_lane', 'lane_type', 'lane_status','lane_name');
const loading = ref(true);
const tableData = ref([]);
const info = ref({});
const deptId = ref(Number(getCKInfo('deptId')))
/** 查询班组建设 活动或会议列表 */
function getList(type) {
  loading.value = true;
  getlaneStatistics().then(response => {
    tableData.value = response.data;
    loading.value = false;
  });
}
const getInfo = () => {
  loading.value = true;
  getLaneInfo({id:deptId.value}).then(response => {
    info.value = response.data;
    loading.value = false;
  });
}

getInfo()
getList()
</script>
<style scoped >
.flex {
  display: flex;
  align-items: center;
}
.card {
  width: 300px;
  height: 100px;
  background: linear-gradient(180deg, #84abf0 0%, #547eec 100%);
  padding: 15px 0;
  box-sizing: border-box;
  border-radius: 10px;
  margin-right: 20px;
}
.card .tag {
  height: 70px;
  padding-left: 15px;
  flex: 1;
}
.card .tag:first-child {
  border-right: 1px solid #4781f8;
}
.card .title {
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
}
.card .num {
  color: #fff;
  font-weight: bold;
  font-size: 30px;
}

.margin-bottom {
  margin-bottom: 20px;
}
</style>